import React from 'react'
import { GQL } from '../../../components/GQL'
import { Form, Select, Input, Modal, message } from 'antd'
import { connect } from 'dva'
import PropTypes from 'prop-types'
import gql from 'graphql-tag'

const Option = Select.Option
const colSpan = {
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 12
  }
}

const ModalComponent = ({ form: { getFieldDecorator, validateFields, resetFields }, service = {}, dispatch, visible, refetch, editCustomService, loading }) => {
  const isEditText = service.serviceId ? '编辑' : '新增'
  const onOk = () => {
    validateFields((err, value) => {
      if (!err) {
        value.orderNum = parseInt(value.orderNum)
        service.serviceId && (value.serviceId = parseInt(service.serviceId))
        editCustomService({
          variables: { customService: value }
        }).then(({ data: { editCustomService } }) => {
          const { status } = editCustomService
          if (status === 'fail') {
            message.error(editCustomService.message)
            return
          }
          dispatch({ type: 'customerService/save', payload: { visible: false } })
          resetFields()
          refetch()
        }).catch((err) => {
          console.log(err)
          message.error('error')
        })
      }
    })
  }

  return (
    <Modal
      title={`${isEditText}客服联系方式`}
      visible={visible}
      onCancel={() => {
        resetFields()
        dispatch({ type: 'customerService/save', payload: { visible: false } })
      }}
      onOk={() => onOk()}
      confirmLoading={loading}
      okText='确定'
      cancelText='取消'
    >
      <Form>
        <Form.Item {...colSpan} label='类型' required>
          {
            getFieldDecorator('serviceType', { initialValue: service.serviceType ? service.serviceType : 'PersQQ' })(
              <Select placeholder='请选择客服类型'>
                <Option value='PersQQ'>个人QQ</Option>
                <Option value='EnterQQ'>企业QQ</Option>
                <Option value='Wangwang'>旺旺</Option>
                <Option value='WeChat'>微信</Option>
                <Option value='Tel'>电话</Option>
              </Select>
            )
          }
        </Form.Item>
        <Form.Item {...colSpan} label='名称' required>
          {
            getFieldDecorator('serviceName', {
              rules: [{ required: true }],
              initialValue: service.serviceName ? service.serviceName : ''
            })(<Input placeholder='请输入客服名称' />)
          }
        </Form.Item>
        <Form.Item {...colSpan} label='号码' required>
          {
            getFieldDecorator('serviceNumber', {
              rules: [{ required: true }],
              initialValue: service.serviceNumber ? service.serviceNumber : ''
            })(<Input placeholder='请输入客服号码' />)
          }
        </Form.Item>
        <Form.Item {...colSpan} label='排序值' required>
          {
            getFieldDecorator('orderNum', { initialValue: service.orderNum ? service.orderNum : 500 })(
              <Input placeholder='请输入排序值' />)
          }
        </Form.Item>
      </Form>
    </Modal>
  )
}

ModalComponent.propTypes = {
  form: PropTypes.object,
  dispatch: PropTypes.func,
  visible: PropTypes.bool,
  refetch: PropTypes.func,
  resetFields: PropTypes.func,
  editCustomService: PropTypes.func.isRequired,
  loading: PropTypes.bool.isRequired,
  service: PropTypes.object
}
const mapStateToProps = ({ customerService }) => ({ customerService })
export default GQL({
  mutation: gql`
      mutation editCustomService($customService: CustomServiceInput!){
        editCustomService(customService: $customService) {
          status
          message
      }
    }`,
  name: 'editCustomService'
})(connect(mapStateToProps)(Form.create()(ModalComponent)))
